@import '~@styles/_mixin.scss';

.header {
    h1.header_wrapper {
        line-height: 55px;
        height: 55px;
        position: relative;
        margin: 0;
        background: #fff;
    }

    div.blur_bg_content {
        height: 55px;
        position: relative;
        z-index: 99;
        // background: rgba(0,0,0, .1);
        box-shadow: 0 2px 4px rgba(0,0,0, .1);
    }

    div.bg_blur {
        // background: url("/ararin/ui/components/imgs/bgHeader_02.jpg") no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center -284px;
        filter: blur(3px);
    }

    div.bg_content {
        height: 55px;
        margin-top: -55px;
        // background: url("/ararin/ui/components/imgs/bgHeader_02.jpg") no-repeat;
        background-position: center -284px;
    }

    div.mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        // background-color: hsla(55,0%,0%,0.5);
        background-color: hsla(0,0%,100%,.1);

    }

    div.mask.dark {
        background-color: hsla(0,0%,100%,.5);
        ul.nav_left {
            color: '#fff';
        }

    }

    div.mask.light {
        background-color: hsla(55,0%,0%,0.5);
        ul.nav_left {
            color: '#333';
        }
   
    }

    div.nav {
        // @include clear_fix();
        padding: 0 55px;
        position:relative;
        margin: 0 auto;
        width: 80%;
        min-width: 980px;
        max-width: 1900px;
        display: flex;
        justify-content: space-between;
    }

    ul.nav_left {
        padding: 0;
        float: left;
        margin: 0;
        @include clear_fix();
    }

    ul.nav_right {
        padding: 0;
        float: right;
        margin: 0;
        @include clear_fix();
    }

    li.nav_item {
        float: left;
        letter-spacing: 1px;
        // color: #ffffff;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        padding: 0 15px;
        cursor: pointer;
        // color: #fff;
        color: #888;
        font-weight: normal;
        box-sizing: border-box;
        position: relative;
        transition: background .3s ease,
                    color .3s ease;
        &::after,
        &.active::after {
            opacity: 0;
            transition: all .3s ease;
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            display: block;
            width: 100%;
            height: 2px;
            background: rgb(21, 185, 250);
        }
        &.active::after {
            opacity: 1;
        }
        &:hover,
        &.active {
            background: rgba(21, 185, 250, 0.07);
            color: #32b5e9;
            &:hover::after {
                opacity: 1;
            }
        }
    }
}